﻿<script type="text/javascript">
var ultimo_time = "{{ ultimo_time }}";
var d1 = [];
// a null signifies separate line segments
var d1 = [{% for row in response %}[{{ row.0 }},{{ row.1 }}],{% endfor %}[0,0]];
if (d1[(d1.length-1)][0]==0){
	d1.pop();
	//alert('popei');
}
var options = {
	lines: { show: true },
	points: { show: false },
	color: "rgb(100, 100, 255)",
	shadowSize: 0,
	xaxis: { mode: "time" }
};
function ajaxGraph(){
		$.ajax({
		   contentType: 'application/json',
		   type: "GET",
		   url: "/graph_ajax_json/{{ ativo_cod }}/"+ultimo_time+"/",
		   dataType: 'json',
		   success: function(resp) {
						var item = resp;
						if(item=="UN"){
							//alert("UN");
						}else{
							var new_arr = item;
							d1.push([new_arr[0][0],new_arr[0][1]]); //volta d1 para ultimo
							$.plot($("#placeholder"), [ d1 ], options);
							
							ultimo_time = new_arr[0][0]; //seta o time para o ultimo
							//alert("new_arr: " + new_arr);
							//alert("ultimo_time: " + ultimo_time);
							//alert("d1: " + d1);
						}
						return;	
					},
			error: function() {
				// Prompt for user data and process the result using a callback:
				//alert('Falha de conexao com o servidor.');
				$("#erro_dialog").dialog({ resizable: false });
			},
        });
 }	

 setInterval('ajaxGraph();', 15000);
</script> 
<div class="main-content-monitor">
<!-- Pagetitle -->
<h1 class="pagetitle">Gráfico Ativo {{ ativo_cod }}:</h1><br/>
<div id="placeholder" style="width:600px;height:300px;"></div> 
<script id="source" language="javascript" type="text/javascript"> 
$(function () {
    $.plot($("#placeholder"), [ d1 ], options);
});
</script> 
</div>